// Search index view
// This is the home page
Ext.define("BioGene.view.SearchIndexView", {
	extend: "Ext.form.Panel",
	alias: "widget.searchindexview",
	
	requires: [
        'Ext.field.Search'
    ],
	
	config: {
		id: 'indexPage',
		layout: 'fit',
    	styleHtmlContent: false,
    	scrollable: true,
    	html: "<div class='index_text'><p>BioGene is an information tool for biological research. Use Biogene to learn about gene function.</p>"+
		"<p>Enter a gene symbol or gene name, for example \"CDK4\" or \"cyclin dependent kinase 4\" and hit SEARCH.</p>"+
		"<p>BioGene was produced with the <a href=\"http://cbio.mskcc.org\">Computational Biology Center</a> at Memorial Sloan-Kettering Cancer Center with content from Entrez Gene at the <a href=\"http://www.ncbi.nlm.nih.gov\">NCBI</a>. Send your feedback to <span class=\"mailme\" title=\"Contact us\">biogene at cbio dot mskcc dot org</span>.</p>"+
		"<div id=\"logoBox\"><img src='resources/images/cbio.png' id=\"logo\"></div></div>",
	},
				
    initialize: function () {

        this.callParent(arguments);

		// Information Button
        var infoButton = new Ext.Button({
        	iconCls:'info',
            handler: this.onInfoTap,
            scope: this
        });
        
        // Settings page button
        var settingsButton = new Ext.Button({
        	iconCls:'settings',
            handler: this.onSettingsTap,
            scope: this
        });

		// Top toolbar
        var topToolbar = new Ext.Toolbar({
        	docked: 'top',
            title: 'Search'
        });
        
        // Search box, this dispatches to the search function in the controller
        var searchBox = {
        	xtype: "searchfield",
        	placeHolder: 'Search',
        	name: 'searchField',
        	id: 'searchField',
        	autoCapitalize: false,
        	autoCorrect: false,
        	width: '98%',
        	listeners: {
        		action: function () {
        			this.fireEvent("newSearch", this.getValue(), 1, 'left', 'index', this);
        		}
        	}
        };
        
        // Bottom docked toolbar
        var botToolbar = new Ext.Toolbar({
        	defaults: {
            	iconMask: true,
            	ui: 'plain'
        	},
        	docked: 'bottom',
            items: [
            	infoButton,
            	{ xtype: 'spacer' },
            	settingsButton
            ]
        });
        
        // Search toolbar sits underneath the top toolbar, contains the searchbox
        var searchBar = new Ext.Toolbar({
        	cls: 'searchBar',
        	docked: 'top',
        	id: 'searchBar',
        	items: [searchBox]
        });

        this.add([topToolbar, searchBar, botToolbar]);

    },
    
    onSearchTap: function () {
    	this.fireEvent("newSearch", this);
    },
    
    onInfoTap: function () {
        this.fireEvent("showInfo", this);
    },
    
    onSettingsTap: function () {
		this.fireEvent("changeSettings", this);
    }
    
});